<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts" :chartnum="chartnum" :activeCharts="activeCharts" :width="width" :height="height" :option="option" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch } from "vue";
import echartsDom from "./echartsDom.vue";
import { func } from "vue-types";
const bian = ref("双边");
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  chartvlue: {
    type: Object,
    required: true
  },
  activeCharts: {
    type: String,
    default: ""
  },
  chartnum: {
    type: Number,
    default: 12
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {},
  visualMapvalue: {}
});
const fillNullsWithPrevious = data => {
  let previousNonNull = null;
  return data.map(item => {
    if (item == null) {
      return previousNonNull;
    } else {
      previousNonNull = item;
      return item;
    }
  });
};
function formatDate(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${h}:${m}:${s}`;
}
const { option, visualMapvalue } = toRefs(state);
const getoptions = () => {
  const start = new Date();
  if (props.chartvlue.pointValues != null) {
    isShowEcharts.value = true;
    if (props.chartvlue.lslValue && props.chartvlue.uslValue) {
      option.value = {
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              title: "点击保存为图片",
              name: `${props.chartvlue.indicatorName}(${formatDate(start)})`
            }
          }
        },
        grid: {
          left: "60px",
          top: "50px",
          right: "50px",
          bottom: "20px",
          containLabel: true
        },
        legend: {
          x: "center"
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          boundarGap: false,
          axisLabel: {
            align: "center",
            formatter: function (value) {
              return value.split(" ")[0] + "\n" + value.split(" ")[1];
            }
          },
          data: props.chartvlue.pointValues.map(item => formatDate(item.time))
        },
        yAxis: {
          name: props.chartvlue.pointUnit != null ? props.chartvlue.pointUnit : "-",
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              type: "solid"
            }
          },
          min:
            props.chartvlue.startValue != null
              ? props.chartvlue.startValue
              : props.chartvlue.lslValue != null
                ? Math.min(props.chartvlue.minValue, props.chartvlue.lslValue)
                : props.chartvlue.minValue,
          max:
            props.chartvlue.endValue != null
              ? props.chartvlue.endValue
              : props.chartvlue.uslValue != null
                ? Math.max(props.chartvlue.maxValue, props.chartvlue.uslValue)
                : props.chartvlue.maxValue
        },
        dataZoom: [
          {
            type: "slider",
            yAxisIndex: 0,
            left: "0%"
          },
          {
            type: "inside",
            yAxisIndex: 0,
            zoomOnMouseWheel: true,
            left: "0%"
          }
        ],
        visualMap: {
          show: false,
          dimensions: 0,
          seriesIndex: 0,
          pieces: [
            {
              lte: Number(props.chartvlue.lslValue) ? Number(props.chartvlue.lslValue) : -99999999,
              color: "red"
            },
            {
              gt: Number(props.chartvlue.lslValue) ? Number(props.chartvlue.lslValue) : -99999999,
              lte: Number(props.chartvlue.uslValue) ? Number(props.chartvlue.uslValue) : 99999999,
              color: "#5974c8"
            },
            {
              gt: Number(props.chartvlue.uslValue) ? Number(props.chartvlue.uslValue) : 99999999,
              color: "red"
            }
          ]
        },
        series: [
          {
            name: props.chartvlue.indicatorName,
            data: fillNullsWithPrevious(props.chartvlue.pointValues.map(item => item.value)),
            type: "line",

            markPoint: {
              data: props.chartvlue.pointValues.map((item, index) => {
                if (item.tag) {
                  return {
                    name: item?.spcAlarmNote?.alarmType,
                    value: item?.spcAlarmNote?.alarmType,
                    xAxis: index,
                    yAxis: Math.ceil(item.value)
                  };
                } else {
                  return {};
                }
              })
            },
            markLine: {
              symbol: "none",
              data: getMarkLineData(props.chartvlue)
            }
          }
        ]
      };
    } else {
      option.value = {
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              title: "点击保存为图片",
              name: `${props.chartvlue.indicatorName}(${formatDate(start)})`
            }
          }
        },
        grid: {
          left: "60px",
          top: "50px",
          right: "100px",
          bottom: "20px",
          containLabel: true
        },
        legend: {
          x: "center"
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          boundarGap: false,
          axisLabel: {
            align: "center",
            formatter: function (value) {
              return value.split(" ")[0] + "\n" + value.split(" ")[1];
            }
          },
          data: props.chartvlue.pointValues.map(item => formatDate(item.time))
        },
        yAxis: {
          name: props.chartvlue.pointUnit != null ? props.chartvlue.pointUnit : "-",
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              type: "solid"
            }
          },
          min:
            props.chartvlue.startValue != null
              ? props.chartvlue.startValue
              : props.chartvlue.lslValue != null
                ? Math.min(props.chartvlue.minValue, props.chartvlue.lslValue)
                : props.chartvlue.minValue,
          max:
            props.chartvlue.endValue != null
              ? props.chartvlue.endValue
              : props.chartvlue.uslValue != null
                ? Math.max(props.chartvlue.maxValue, props.chartvlue.uslValue)
                : props.chartvlue.maxValue
        },
        dataZoom: [
          {
            type: "slider",
            yAxisIndex: 0,
            left: "0%"
          },
          {
            type: "inside",
            yAxisIndex: 0,
            zoomOnMouseWheel: true,
            left: "0%"
          }
        ],
        series: [
          {
            name: props.chartvlue.indicatorName,
            data: fillNullsWithPrevious(props.chartvlue.pointValues.map(item => item.value)),
            type: "line",

            markPoint: {
              data: props.chartvlue.pointValues.map((item, index) => {
                if (item.tag) {
                  return {
                    name: item?.spcAlarmNote?.alarmType,
                    value: item?.spcAlarmNote?.alarmType,
                    xAxis: index,
                    yAxis: Math.ceil(item.value)
                  };
                } else {
                  return {};
                }
              })
            },
            markLine: {
              symbol: "none",
              data: getMarkLineData(props.chartvlue)
            }
          }
        ]
      };
    }
  } else {
    isShowEcharts.value = false;
  }
};
const getMarkLineData = data => {
  let arr = [];
  if (data.u3lValue != null) {
    arr.push({
      name: "U3L值",
      yAxis: data.u3lValue != null ? Number(data.u3lValue) : -9999,
      lineStyle: {
        color: "#3bf65c",
        width: "1",
        type: "solide"
      },
      label: {
        position: "end",
        formatter: `${data.u3lValue}`,
        color: "#3bf65c",
        fontWeight: 600
      }
    });
  }
  if (data.uslValue != null) {
    arr.push({
      name: "USL值",
      yAxis: Number(data.uslValue) != null ? Number(data.uslValue) : -9999,
      lineStyle: {
        color: "#A600FF",
        width: "1",
        type: "solide"
      },
      label: {
        position: "end",
        formatter: `${data.uslValue}`,
        color: "#A600FF",
        fontWeight: 600
      }
    });
  }
  if (data.uclValue != null) {
    arr.push({
      name: "UCL值",
      yAxis: Number(data.uclValue) !== null ? Number(data.uclValue) : -9999,
      lineStyle: {
        color: "#FF0000",
        width: "1",
        type: "dashed"
      },
      label: {
        position: "end",
        formatter: `${data.uclValue}`,
        color: "#FF0000",
        fontWeight: 600
      }
    });
  }
  if (data.uwlValue != null) {
    arr.push({
      name: "UWL值",
      yAxis: Number(data.uwlValue) !== null ? Number(data.uwlValue) : -9999,
      lineStyle: {
        color: "#FF9900",
        width: "1",
        type: "dashed"
      },
      label: {
        position: "end",
        formatter: `${data.uwlValue}`,
        color: "#FF9900",
        fontWeight: 600
      }
    });
  }
  if (data.uaclValue != null) {
    arr.push({
      name: "上自控线",
      yAxis: Number(data.uaclValue) !== null ? Number(data.uaclValue) : -9999,
      lineStyle: {
        color: "#3B82F6",
        width: "1",
        type: "dashed"
      },
      label: {
        position: "end",
        formatter: `${data.uaclValue}`,
        color: "#3B82F6",
        fontWeight: 600
      }
    });
  }
  if (data.targetValue != null) {
    arr.push({
      name: "Target值",
      yAxis: Number(data.targetValue) !== null ? Number(data.targetValue) : -9999,
      lineStyle: {
        color: "#00E272",
        width: "1",
        type: "solide"
      },
      label: {
        position: "end",
        formatter: `${data.targetValue}`,
        color: "#00E272",
        fontWeight: 600
      }
    });
  }
  if (data.l3lValue != null) {
    arr.push({
      name: "L3L值",
      yAxis: Number(data.l3lValue) !== null ? Number(data.l3lValue) : -9999,
      lineStyle: {
        color: "#3bf65c",
        width: "1",
        type: "solide"
      },
      label: {
        position: "end",
        formatter: `${data.l3lValue}`,
        color: "#3bf65c",
        fontWeight: 600
      }
    });
  }
  if (data.lwlValue != null) {
    arr.push({
      name: "LWL值",
      yAxis: Number(data.lwlValue) != null ? Number(data.lwlValue) : -9999,
      lineStyle: {
        color: "#FF9900",
        width: "1",
        type: "dashed"
      },
      label: {
        position: "end",
        formatter: `${data.lwlValue}`,
        color: "#FF9900",
        fontWeight: 600
      }
    });
  }
  if (data.lclValue != null) {
    arr.push({
      name: "LCL值",
      yAxis: Number(data.lclValue) != null ? Number(data.lclValue) : -9999,
      lineStyle: {
        color: "#FF0000",
        width: "1",
        type: "dashed"
      },
      label: {
        position: "end",
        formatter: `${data.lclValue}`,
        color: "#FF0000",
        fontWeight: 600
      }
    });
  }
  if (data.lslValue != null) {
    arr.push({
      name: "LSL值",
      yAxis: Number(data.lslValue) != null ? Number(data.lslValue) : -9999,
      lineStyle: {
        color: "#A600FF",
        width: "1",
        type: "solide"
      },
      label: {
        position: "end",
        formatter: `${data.lslValue}`,
        color: "#A600FF",
        fontWeight: 600
      }
    });
  }
  if (data.laclValue != null) {
    arr.push({
      name: "下自控线",
      yAxis: Number(data.laclValue) != null ? Number(data.laclValue) : -9999,
      lineStyle: {
        color: "#3B82F6",
        width: "1",
        type: "dashed"
      },
      label: {
        position: "end",
        formatter: `${data.laclValue}`,
        color: "#3B82F6",
        fontWeight: 600
      }
    });
  }
  return arr;
};
watch(
  () => props.chartvlue,
  newOption => {
    console.log(props.chartvlue);
    getoptions();
  },
  { immediate: true }
);

watch(
  () => props.chartnum,
  newOption => {
    console.log(props.chartnum);
    getoptions();
  },
  { immediate: true }
);
watch(
  () => props.activeCharts,
  newOption => {
    console.log(props.activeCharts);
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 410px;
  overflow: hidden;
  text-align: center;
}

.numList {
  float: left;
  width: 10%;
  height: 100%;
  margin-top: 20px;

  .numListDiv {
    width: 100%;
    height: 23px;
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 23px;
    background: #eff6ff;

    .numListDivnum {
      float: left;
      width: calc(50% - 4px);
      height: 20px;
    }

    .txright {
      text-align: right;
    }
  }
}

.heighttwo {
  height: 46px !important;
}

.color2 {
  color: #a6a6a6 !important;
}
</style>
